<template>
  <view class="page-content">
    <button
      class="avatar-wrapper"
      open-type="chooseAvatar"
      @chooseavatar="onChooseAvatar"
    >
      <image class="avatar" :src="avatarUrl"></image>
    </button>
    <view class="nick-name">
      <text class="nick-name-item">昵称</text>
      <input
        type="nickname"
        class="weui-input"
        v-model="nickName"
        @change="handleNickNameChange"
        placeholder="请输入昵称"
      />
    </view>
    <view class="footer-btn footer">
      <view class="submit-btn">
        <up-button
          type="primary"
          text="提交"
          :loading="isLoading"
          @click="SubmitUserInfo()"
        ></up-button>
      </view>
    </view>
  </view>
</template>
  
  <script setup>
import { reactive, ref } from "vue";

import { getStorageData, setStorageData } from "@/utils/storageData.js";

import { UpdatePerson } from "@/api/common.js";
let userInfo = JSON.parse(getStorageData("userInfo"));

let avatarUrl = ref("");
let nickName = ref("");
let isLoading = ref(false);

const onChooseAvatar = (e) => {
  console.log(e, "e.detail");
  const avater = e.detail;
  avatarUrl.value = avater.avatarUrl;
};

// 更新昵称
const handleNickNameChange = (val) => {
  nickName.value = val.detail.value;
};

const SubmitUserInfo = async () => {
  let params = {
    avatarUrl: avatarUrl.value,
    nickName: nickName.value,
  };
  try {
    isLoading.value = true;
    let data = await UpdatePerson(params);
    userInfo.avatarUrl = avatarUrl.value;
    userInfo.nickName = nickName.value;
    setStorageData("userInfo", JSON.stringify(userInfo));
    isLoading.value = false;
    console.log(data, "data");
    uni.switchTab({
      url: '/pages/mine/index'
    });
  } catch (error) {
    isLoading.value = false;
  }
};

avatarUrl.value = userInfo.avatarUrl;
nickName.value = userInfo.nickName;
</script>
  
<style lang="scss" scoped>
.avatar-wrapper {
  margin-top: 50rpx;
  width: 120rpx;
  height: 120rpx;
  padding: 0 !important;
  image {
    width: 120rpx;
    height: 120rpx;
  }
}
.weui-input {
  margin-left: 20rpx;
}
.nick-name {
  margin-top: 40rpx;
  padding: 40rpx;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  align-items: center;
  .nick-name-item {
    font-size: 32rpx;
    display: block;
    line-height: 32rpx;
    height: 32rpx;
  }
}
</style>
  